<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>翻盖效果</title>
		<style type="text/css">
			#box {
				width: 210px;
				height: 210px;
				margin: 200px auto;
				position: relative;
			}
			
			.cover {
				width: 100%;
				height: 100%;
				background: url(img/qiqi.JPG);
				background-size: cover;
				border: solid 5px rgba(255, 255, 255, 0.5);
				border-radius: 107px;
				position: absolute;
				left: -1px;
				top: -1;
				transform-origin: 50% 0;
				transition: all 3s;
			}
			
			.bottom {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				line-height: 100%;
				color: #FFF;
				text-align: center;
				background: #000;
				border-radius: 105px;
				box-shadow: 0 0 20px #000;
			}
			
			#box:hover .cover {
				transform: rotateX(180deg);
			}
			
			.bottom p {
				width: 100%;
			}
			
			.bottom p:first-of-type {
				height:50px;
				width:85%;
				line-height: 50px;
				font-size:18px;
				border-bottom: solid 1px #FFF;
				margin:0 auto;
			}
			
			.bottom p:last-of-type {
				font-size: 14px;
			}
			
		</style>

	</head>

	<body>
		<div id="box">
			<div class="bottom">
				<p>Love</p>
				<p>I Love you 柒柒</p>
			</div>
			<div class="cover"></div>
		</div>

	</body>

</html>